<template>
  <!-- <div>菜单</div> -->
  <a-menu
    style="height: 100%"
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
    :items="menuItem"
    @select="selectItem"
  >
  </a-menu>
  <!-- <div>{{ selectedKeys }} {{ openKeys }}</div> -->
</template>
<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";

const openKeys = ref(["1"]);
const selectedKeys = ref(["key1"]);
const menuItem = [
  {
    key: "1",
    label: "用户管理",
    title: "用户管理",
    children: [{ key: "key1", label: "用户列表" }],
  },
  { key: "key2", label: "畜牧管理", title: "畜牧管理" },
];
const router = useRouter();
const route = useRoute();
console.log(route);
const selectItem = ({ item, key, selectedKeys }) => {
  console.log(key);
  router.push({ name: key });
};
</script>
<style></style>
